import React from 'react';
import { Card, Tabs, Typography, Descriptions } from 'antd';
import { createStyles } from 'antd-style';
import MonacoEditor from 'react-monaco-editor';

const { TabPane } = Tabs;

const useStyles = createStyles(({ token }) => ({
  responseContainer: {
    padding: '16px',
    backgroundColor: token.colorBgContainer,
    borderRadius: token.borderRadius,
  },
  responseTitle: {
    marginBottom: '16px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  statusSuccess: {
    color: token.colorSuccess,
  },
  statusError: {
    color: token.colorError,
  },
  editorContainer: {
    border: `1px solid ${token.colorBorder}`,
    borderRadius: token.borderRadius,
    overflow: 'hidden',
  },
}));

interface ResponsePanelProps {
  loading: boolean;
  response: {
    status?: number;
    statusText?: string;
    headers?: Record<string, string>;
    data?: any;
  };
}

const ResponsePanel: React.FC<ResponsePanelProps> = ({ loading, response }) => {
  const { styles } = useStyles();

  const renderResponseBody = () => {
    if (!response.data) return null;

    const content = typeof response.data === 'string' 
      ? response.data 
      : JSON.stringify(response.data, null, 2);

    return (
      <div className={styles.editorContainer}>
        <MonacoEditor
          language="json"
          theme="vs"
          value={content}
          options={{
            readOnly: true,
            minimap: { enabled: false },
            scrollBeyondLastLine: false,
            automaticLayout: true,
            fontSize: 14,
            lineNumbers: 'on',
            scrollbar: {
              vertical: 'auto',
              horizontal: 'auto',
            },
          }}
          height="300"
        />
      </div>
    );
  };

  const renderResponseHeaders = () => {
    if (!response.headers) return null;

    return (
      <Descriptions bordered size="small">
        {Object.entries(response.headers).map(([key, value]) => (
          <Descriptions.Item key={key} label={key}>
            {value}
          </Descriptions.Item>
        ))}
      </Descriptions>
    );
  };

  const getStatusClass = () => {
    if (!response.status) return '';
    return response.status >= 200 && response.status < 300
      ? styles.statusSuccess
      : styles.statusError;
  };

  return (
    <div className={styles.responseContainer}>
      <div className={styles.responseTitle}>
        <Typography.Title level={5}>响应结果</Typography.Title>
        {response.status && (
          <Typography.Text className={getStatusClass()}>
            {response.status} {response.statusText}
          </Typography.Text>
        )}
      </div>

      <Card loading={loading}>
        <Tabs defaultActiveKey="body">
          <TabPane tab="响应体" key="body">
            {renderResponseBody()}
          </TabPane>
          <TabPane tab="响应头" key="headers">
            {renderResponseHeaders()}
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default ResponsePanel;